<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
	<script src="js/jquery.min.js"></script>
  <script type="text/javascript" charset="utf-8" src="ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="ueditor/ueditor.all.min.js"> </script>
    <base href="<%=basePath%>">
    
    <title>My JSP 'MyJsp.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<style type="text/css">
	#beeeeeeeee{
	background: url(img/beeeeeee.png);
	width: 1010px;
	margin: auto;
	height: 10px;
	}
	#headdiaryimgdiv{
	background: url(img/diaryhead.png);
	height: 350px;
	width: 1010px;
	margin: auto;
	}
	
	.file {
    position: relative;
    display: inline-block;
    background: #D0EEFF;
    border: 1px solid #99D3F5;
    border-radius: 4px;
    padding: 4px 12px;
    overflow: hidden;
    color: #1E88C7;
    text-decoration: none;
    text-indent: 0;
    line-height: 20px;
	}
	.file input {
	    position: absolute;
	    font-size: 100px;
	    right: 0;
	    top: 0;
	    opacity: 0;
	}
	.file:hover {
	    background: #AADFFD;
	    border-color: #78C3F3;
	    color: #004974;
	    text-decoration: none;
	}
	.input-container {
            width: 800px;
     splay: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: reverse;
            -ms-flex-flow: column-reverse;
            flex-flow: column-reverse;
            -webkit-box-align: start;
            -ms-flex-align: start;
            align-items: flex-start;
            margin: 30px auto;
        }
        .input-container input {
            -webkit-box-ordinal-group: 11;
            order: 10;
            -ms-flex-order: 10;
            outline: none;
            border: none;
            width: 100%;
            padding: 10px 0;
            font-size: 20px;
            border-bottom: 1px solid #d5d5d5;
            text-indent: 10px;
        }
        .input-container input::-moz-placeholder {
            opacity: 0;
        }
        .input-container input::-webkit-input-placeholder {
            opacity: 0;
        }
        .input-container input:-ms-input-placeholder {
            opacity: 0;
        }
        .input-container input, .input-container label {
            transition: all 0.3s;
        }
        .input-container label {
            -webkit-box-ordinal-group: 101;
            -ms-flex-order: 100;
            order: 100;
            color: #3f4f5b;
            -webkit-transform-origin: left bottom;
            transform-origin: left bottom;
            -webkit-transform: translate(10px, 40px);
            transform: translate(0px, 40px); }
        .input-container .bottom-line {
            order: 2;
            width: 0;
            height: 2px;
            background: #658db5;
            transition: all 0.3s;
        }
        .input-container input:focus {
            border-bottom-color: #fff;
        }
        .input-container input:focus ~ div,
        .input-container input:not(:placeholder-shown) ~ div {
            width: 100%;
        }
        .input-container input:focus + label,
        .input-container input:not(:placeholder-shown) + label {
            color: #52616c;
            -webkit-transform: translate(10px) scale(0.9);
            transform: translate(10px) scale(0.9);
        }
	.alldivok{
	width: 1010px;
	margin:0px auto;
	}
	#newdiaryheadimg{
	margin: 30px auto;
	width: 800px;
	}
	#newdiaryplace{
	margin: 30px auto;
	width: 800px;
	}
	#newdiarycontent{
	margin:30px auto;
	width: 800px;
	}
	#okdiarysendorno{
	margin:30px auto;
	width: 800px;
	}
	.button{
	padding: 10px 30px 10px 30px;
	background: #66C1E4;
	border: none;
	color: #FFF;
	box-shadow: 1px 1px 1px #4C6E91;
	-webkit-box-shadow: 1px 1px 1px #4C6E91;
	-moz-box-shadow: 1px 1px 1px #4C6E91;
	text-shadow: 1px 1px 1px #5079A3;
	}
	.button:hover{
	background: #3EB1DD;
	}
	.select {
	background: #fbfbfb url('down-arrow.png') no-repeat right;
	background: #fbfbfb url('down-arrow.png') no-repeat right;
	appearance:none;
	-webkit-appearance:none;
	-moz-appearance: none;
	text-indent: 0.01px;
	text-overflow: '';
	width: 70%;
	}
	</style>
	<script type="text/javascript">
	function getplace(){
	$.getJSON("DiaryDetailServlet",{flag:"inadddiarygetplace"},function(data){
	var str="<font size='3'>这是什么地方的游记呢"+
				"</font><br>"+
				"<label>"+
				"<select name='selection'>"+
				"<option value=''>请选择游记地点</option>";
	for(var i=0;i<data.length;i++){
	str=str+"<option value='"+data[i].place_id+"'>"+data[i].place_name+"</option>";
				
	
	}
	str=str+"</select></label>";
	$("#newdiaryplace").html(str);
	});
	
	
	}
	
	function checkall(){
	var a=document.forms["myfo"]["input"].value;
	if(a==""){
			alert("标题不能留空哦");
			return false;
	}
	var b=document.forms["myfo"]["selection"].value;
	if(b==""){
			alert("游记地点要选哦");
			return false;
	}
	var c=document.forms["myfo"]["diarycontent"].value;
	if(c.length<200){
			alert("游记太过精炼了，要大于200字哦");
			return false;
	}
	return true;
	
	
	}
	
	</script>
  </head>
  
  <body onload="getplace()">
    <div>
		<jsp:include page="travelhead.jsp"></jsp:include>
	</div>
	<div id="beeeeeeeee"> </div>
	<div id="addnewdiarydiv">
	<script type="text/javascript">   
	//实例化编辑器  
		var ue = UE.getEditor('myEditor'); 
	</script>  
	<form action="DiaryAddServlet" name="myfo" method="post" enctype="multipart/form-data">
	<input type="hidden" name="flag" value="addnewdiary">
	<div id="headdiaryimgdiv" ></div>
	<!-- 标题DIV -->
	<div class="input-container">
    <input type="input" id="input" name="input" placeholder="为你的游记取个标题吧">
    <label for="input">为你的游记取个标题吧</label>
    <div class="bottom-line"></div>
	</div>
	<!-- 头图DIV -->
	<div id="newdiaryheadimg">	
	<font size="3">为你的游记选张好看的头图吧(如不上传图片，将使用默认图片)
	</font><br>
	<a href="javascript:;" class="file">选择头图
    <input type="file" name="isdiaryheadimg" id="isdiaryheadimg" accept="image/*">
	</a>
	</div>
	<!-- 游记地点DIV -->
	<div id="newdiaryplace">
	
    
	</div>
	<!-- 内容DIV -->
	<div id="newdiarycontent">
	<textarea id="myEditor" name="diarycontent" style="width: 100%;height: 1000px"> </textarea>
	</div>
	<div id="okdiarysendorno">
	<input type="submit" value="send" title="发表游记" alt="发表游记"  onclick="return checkall()"   class="button" />
	</div>
	</form>
	</div>
	
	
  </body>
</html>
